<template>
<div>
    <div class="geren">
     <img :src="touxiang[route]" alt="" class="touxiang">
     <div>
        <h3>{{username[route]}}</h3>
        <span>{{userdescription[route]}}</span>
     </div>
    </div>
    <h1>{{title[route]}}</h1>
    <img :src="img[route]" alt="">
    <div class="article">{{article[route]}}</div>
</div>  
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
        touxiang:[],
        username:[],
        userdescription:[],
        title:[],
        img:[],
        article:[],
        route:0
        }
    },
beforeMount() {
    this.route
    console.log(this.$route);
    this.route=Number(this.$route.query.sid)-1
    console.log(this.route);
    axios.get("egg/student").then((response)=>{
      let newusername = response.data.map((obj) => obj.username);
      this.username=newusername;
       let newtouxiang = response.data.map((obj) => obj.touxiang);
      this.touxiang=newtouxiang;
       let newuserdescription = response.data.map((obj) => obj.userdescription);
      this.userdescription=newuserdescription;
       let newtitle = response.data.map((obj) => obj.title);
      this.title=newtitle;
       let newimg = response.data.map((obj) => obj.img);
      this.img=newimg;
      let newarticle = response.data.map((obj) => obj.article);
      this.article=newarticle;
    })
},
}
</script>

<style>
.touxiang{
    width: 100px;
    height: 100px;
}
.geren{
    display: flex;
}
h1{
    text-align: center;
}
.article{
    font-size: 20px;
}
</style>